/**
 * Created by Administrator on 2016/11/30 0030.
 */
/**
 *  to do  封装获取样式属性的函数
 * @param tag  要获取的标签名
 * @param attr  要获取的属性名
 * @returns {*} 返回属性值带有单位
 */
function getStyle(tag, attr) {
    //判断currentstyle是否支持，如果不支持返回值为undefined，进入else
    if (tag.currentStyle) {
        return tag.currentStyle[attr];
    } else {
        //两者返回的都是对象，对对象属性查看用中括号因为参数为字符串
        return getComputedStyle(tag, null)[attr];
    }
}
/**
 * to do  封装了一个可以修改任意属性的值并缓速改变的函数
 * @param tag  要修改的标签
 * @param attr  要修改的属性名
 * @param target    最后的属性值
 */
function animate(tag, attr, target) {
    //每次调用先清除之前存在的定时器
    clearInterval(tag.timer);
    tag.timer = setInterval(function () {
        //首先获取要修改的属性的默认值，getstyle获取的值有单位，用parseInt取整
        var leader = parseInt(getStyle(tag, attr));
        //获取每次变化的量
        var step = (target - leader) / 10;
        //让step取整，通过判断step正负确定向上还是向下取整
        step = ster > 0 ? Math.ceil(step) : Math.floor(step);
        //得到每执行一次后的值
        leader = leader + step;
        //要设置的属性在执行一次后值为改变后的leader的值
        tag.style[attr] = leader + "px";
        //当leader的值与target相等时，清除定时器
        if (leader == target) {
            clearInterval(tag.timer);
        }
    }, 20)
}
/**
 * to do  封装了一个改变元素位置并缓速移动的函数
 * @param tag  要改变的标签名
 * @param target    改变后的值
 */
function animateMove(tag, target) {
    //每次调用先清除之前存在的定时器
    clearInterval(tag.timer);
    //设置新的定时器
    tag.timer = setInterval(function () {
        //先获取要设置的标签目前的位置
        var leader = tag.offsetLeft;
        //设置每次改变的量
        var step = (target - leader) / 10;
        //给step取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        //改变每一次执行后的位置
        leader += step;
        tag.style.left = leader + "px";
        //当leader和target相等时，清除定时器
        if (target == leader) {
            clearInterval(tag.timer);
        }
    }, 20)
}
/**
 * to do  封装了一个一次可以改变多个属性把属性和值当做对象参数传递的函数
 * @param tag   要改变的元素
 * @param obj   元素的属性和值构成的对象
 */
function animateObj(tag, obj) {
    //每次调用时首先清除之前存在的定时器
    clearInterval(tag.timer);
    //重新设置新的定时器
    tag.timer = setInterval(function () {
        //先假设flag为true，并在下面进行判断改变flag的值
        var flag = true;
        //通过for in 循环遍历对象里的所有属性
        for (var key in obj) {
            //如果是设置透明度不要有单位，所以单独判断
            if (key == "opacity") {
                //涉及到小数加减，先扩大100倍
                var target = obj[key] * 100;
                var leader = getStyle(tag, key) * 100 || 0;
                step = (target - leader) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                leader += step;
                //最后把取到的值再给tag
                tag.style[key] = leader / 100;
            } else if (key == "zIndex") {
                tag.style.zIndex = obj[key];
            } else {
                //将输入的目标值参数赋值给要执行的目标值
                var target = obj[key];
                //获取该标签这个属性的目前的值
                var leader = parseInt(getStyle(tag, key)) || 0;
                //设置每次改变的量，并进行取整
                var step = (target - leader) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                leader += step;
                //没执行一次属性的值改变一次
                tag.style[key] = leader + "px";
            }
            //对对象里的每个属性进行判断，只要有一个值没有达到target的值，使flag为false
            if (leader != target) {
                flag = false;
            }
        }
        //进入这个if判断里面说明所有的属性值都满足target的值，这时清除定时器
        if (flag) {
            clearInterval(tag.timer);
        }
    }, 20)
}
/**
 *   to  do    封装了一个可以多次修改属性的函数
 * @param tag  要设置的标签名称
 * @param obj   要修改的属性的对象
 * @param fn    每次清除定时器后要执行的函数的函数体
 */
function animateObjAll(tag, obj, fn) {
    //每次调用时首先清除之前存在的定时器
    clearInterval(tag.timer);
    //重新设置新的定时器
    tag.timer = setInterval(function () {
        //先假设flag为true，并在下面进行判断改变flag的值
        var flag = true;
        //通过for in 循环遍历对象里的所有属性
        for (var key in obj) {
            //如果是设置透明度不要有单位，所以单独判断
            if (key == "opacity") {
                //涉及到小数加减，先扩大100倍
                var target = obj[key] * 100;
                var leader = getStyle(tag, key) * 100 || 0;
                step = (target - leader) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                leader += step;
                //最后把取到的值再给tag
                tag.style[key] = leader / 100;
            } else if (key == "zIndex") {
                tag.style.zIndex = obj[key];
            } else {
                //将输入的目标值参数赋值给要执行的目标值
                var target = obj[key];
                //获取该标签这个属性的目前的值
                var leader = parseInt(getStyle(tag, key)) || 0;
                //设置每次改变的量，并进行取整
                var step = (target - leader) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                leader += step;
                //没执行一次属性的值改变一次
                tag.style[key] = leader + "px";
            }
            //对对象里的每个属性进行判断，只要有一个值没有达到target的值，使flag为false
            if (leader != target) {
                flag = false;
            }
        }
        //进入这个if判断里面说明所有的属性值都满足target的值，这时清除定时器
        if (flag) {
            clearInterval(tag.timer);
            //判断传入的参数是不是函数，如果是就调用
            if (typeof fn == "function") {
                fn();
            }
            //或者用短路运算
            //fn&&fn()
        }
    }, 20)
}
var txt = {
    getText: function (ele) {
        if (typeof ele.innerText == "string") {
            return ele.innerText;
        } else {
            return ele.textContent;
        }
    },
    setText: function (ele, content) {
        if (typeof ele.innerText == "string") {
            ele.innerText = content;
        } else {
            ele.textContent = content;
        }
    }
}
var ele = {
    getFirstElementchild: function (ele) {
        if (ele.firstElementChild) {
            return ele.firstElementChild;
        } else {
            var el = ele.firstChild;
            while (el && el.nodeType != 1) {
                el = el.nextSibling
            }
            return el;
        }
    },
    getLastElementcild: function (ele) {
        if (ele.lastElementChild) {
            return ele.lastElementChild
        } else {
            var el = ele.lastChild;
            while (el && el.nodeType != 1) {
                el = el.previousSibling;
            }
            return el;
        }
    },
    getNextElementSibling: function (ele) {
        if (ele.nextElementSibling) {
            return ele.nextElementSibling;
        } else {
            var el = ele.nextSibling;
            while (el && el.nodeType != 1) {
                el = el.nextSibling;
            }
            return el;
        }
    },
    getPrevipusElementsibling: function (ele) {
        if (ele.previousElementSibling) {
            return ele.previousElementSibling
        } else {
            var el = el.previousSibling;
            while (el && el.nodeType != 1) {
                el = el.previousSibling;
            }
            return el;
        }
    }
}